<template>
  <div class="product-list">
    <!-- 商品页可以显示 、 不显示分类页 -->
    <div class="classify-panel">
      <el-card body-style="padding: 8px 20px" v-if="">
      <span class="seller">
        {{ sellerName || '商家全部' }}
      </span>
        <el-row>
          <el-col :span="20" class="class-btn">
            <el-button type="default" size="small">全部</el-button>
            <el-button type="text"  size="small" v-for="item in classList" :key="item.cid" @click="checkOut(item)">
              {{ item.label }} ({{ item.count }})
            </el-button>
            <el-button type="text">....</el-button>
          </el-col>
          <el-col :span="4">
            <el-button size="small" type="text" icon="arrow-up">价格</el-button>
            <el-button size="small" type="text">销量</el-button>
            <el-button size="small" type="text">人气</el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 商品列表页 -->
    <div class="product-panel">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="8">
          <div class="product-item">
            <img src="http://element.eleme.io/static/hamburger.50e4091.png" class="image">
            <div class="list-panel">
              <div class="product-title">
                <span>好吃的汉堡</span>
                <span class="price">￥22</span>
              </div>
              <p>赠品：23423，24234，234234</p>
              <p>
                <el-rate
                  disabled
                  :value="3.4"
                  show-text
                  text-color="#ff9900"
                  text-template="{value}">
                </el-rate>
                <span class="product-count">(销量：100)</span>
              </p>
              <p class="product-desc">
                简介： 来自百家foe粉工来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工
              </p>
              <div class="collect-btn">
                <el-button type="default" size="mini">加入购物车</el-button>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="8">
          <div class="product-item">
            <img src="http://element.eleme.io/static/hamburger.50e4091.png" class="image">
            <div class="list-panel">
              <div class="product-title">
                <span>好吃的汉堡</span>
                <span class="price">￥22</span>
              </div>
              <p>赠品：23423，24234，234234</p>
              <p>
                <el-rate
                  disabled
                  :value="3.4"
                  show-text
                  text-color="#ff9900"
                  text-template="{value}">
                </el-rate>
                <span class="product-count">(销量：100)</span>
              </p>
              <p class="product-desc">
                简介： 来自百家foe粉工来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工
              </p>
              <div class="collect-btn">
                <el-button type="default" size="mini">加入购物车</el-button>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="8">
          <div class="product-item">
            <img src="http://element.eleme.io/static/hamburger.50e4091.png" class="image">
            <div class="list-panel">
              <div class="product-title">
                <span>好吃的汉堡</span>
                <span class="price">￥22</span>
              </div>
              <p>赠品：23423，24234，234234</p>
              <p>
                <el-rate
                  disabled
                  :value="3.4"
                  show-text
                  text-color="#ff9900"
                  text-template="{value}">
                </el-rate>
                <span class="product-count">(销量：100)</span>
              </p>
              <p class="product-desc">
                简介： 来自百家foe粉工来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工
              </p>
              <div class="collect-btn">
                <el-button type="default" size="mini">加入购物车</el-button>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="8">
          <div class="product-item">
            <img src="http://element.eleme.io/static/hamburger.50e4091.png" class="image">
            <div class="list-panel">
              <div class="product-title">
                <span>好吃的汉堡</span>
                <span class="price">￥22</span>
              </div>
              <p>赠品：23423，24234，234234</p>
              <p>
                <el-rate
                  disabled
                  :value="3.4"
                  show-text
                  text-color="#ff9900"
                  text-template="{value}">
                </el-rate>
                <span class="product-count">(销量：100)</span>
              </p>
              <p class="product-desc">
                简介： 来自百家foe粉工来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工
              </p>
              <div class="collect-btn">
                <el-button type="default" size="mini">加入购物车</el-button>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="8">
          <div class="product-item">
            <img src="http://element.eleme.io/static/hamburger.50e4091.png" class="image">
            <div class="list-panel">
              <div class="product-title">
                <span>好吃的汉堡</span>
                <span class="price">￥22</span>
              </div>
              <p>赠品：23423，24234，234234</p>
              <p>
                <el-rate
                  disabled
                  :value="3.4"
                  show-text
                  text-color="#ff9900"
                  text-template="{value}">
                </el-rate>
                <span class="product-count">(销量：100)</span>
              </p>
              <p class="product-desc">
                简介： 来自百家foe粉工来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工
              </p>
              <div class="collect-btn">
                <el-button type="default" size="mini">加入购物车</el-button>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="8">
          <div class="product-item">
            <img src="http://element.eleme.io/static/hamburger.50e4091.png" class="image">
            <div class="list-panel">
              <div class="product-title">
                <span>好吃的汉堡</span>
                <span class="price">￥22</span>
              </div>
              <p>赠品：23423，24234，234234</p>
              <p>
                <el-rate
                  disabled
                  :value="3.4"
                  show-text
                  text-color="#ff9900"
                  text-template="{value}">
                </el-rate>
                <span class="product-count">(销量：100)</span>
              </p>
              <p class="product-desc">
                简介： 来自百家foe粉工来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工
              </p>
              <div class="collect-btn">
                <el-button type="default" size="mini">加入购物车</el-button>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="8">
          <div class="product-item">
            <img src="http://element.eleme.io/static/hamburger.50e4091.png" class="image">
            <div class="list-panel">
              <div class="product-title">
                <span>好吃的汉堡</span>
                <span class="price">￥22</span>
              </div>
              <p>赠品：23423，24234，234234</p>
              <p>
                <el-rate
                  disabled
                  :value="3.4"
                  show-text
                  text-color="#ff9900"
                  text-template="{value}">
                </el-rate>
                <span class="product-count">(销量：100)</span>
              </p>
              <p class="product-desc">
                简介： 来自百家foe粉工来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工
              </p>
              <div class="collect-btn">
                <el-button type="default" size="mini">加入购物车</el-button>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="8">
          <div class="product-item">
            <img src="http://element.eleme.io/static/hamburger.50e4091.png" class="image">
            <div class="list-panel">
              <div class="product-title">
                <span>好吃的汉堡</span>
                <span class="price">￥22</span>
              </div>
              <p>赠品：23423，24234，234234</p>
              <p>
                <el-rate
                  disabled
                  :value="3.4"
                  show-text
                  text-color="#ff9900"
                  text-template="{value}">
                </el-rate>
                <span class="product-count">(销量：100)</span>
              </p>
              <p class="product-desc">
                简介： 来自百家foe粉工来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工
              </p>
              <div class="collect-btn">
                <el-button type="default" size="mini">加入购物车</el-button>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="8">
          <div class="product-item">
            <img src="http://element.eleme.io/static/hamburger.50e4091.png" class="image">
            <div class="list-panel">
              <div class="product-title">
                <span>好吃的汉堡</span>
                <span class="price">￥22</span>
              </div>
              <p>赠品：23423，24234，234234</p>
              <p>
                <el-rate
                  disabled
                  :value="3.4"
                  show-text
                  text-color="#ff9900"
                  text-template="{value}">
                </el-rate>
                <span class="product-count">(销量：100)</span>
              </p>
              <p class="product-desc">
                简介： 来自百家foe粉工来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工
              </p>
              <div class="collect-btn">
                <el-button type="default" size="mini">加入购物车</el-button>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="8">
          <div class="product-item">
            <img src="http://element.eleme.io/static/hamburger.50e4091.png" class="image">
            <div class="list-panel">
              <div class="product-title">
                <span>好吃的汉堡</span>
                <span class="price">￥22</span>
              </div>
              <p>赠品：23423，24234，234234</p>
              <p>
                <el-rate
                  disabled
                  :value="3.4"
                  show-text
                  text-color="#ff9900"
                  text-template="{value}">
                </el-rate>
                <span class="product-count">(销量：100)</span>
              </p>
              <p class="product-desc">
                简介： 来自百家foe粉工来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工来自百家foe粉工
                来自百家foe粉工来自百家foe粉工
              </p>
              <div class="collect-btn">
                <el-button type="default" size="mini">加入购物车</el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 底部翻页信息 -->
    <div class="pagenate">
      <p>没有更多</p>
    </div>
  </div>
</template>


<script>
  export default {
    name: 'product-list',
    // 父级传递参数
    props: {
      // 显示类型
      panelType: {
        type: Array,
        require: true,
        default: () => { return [] }
      },
      // 获取分类的接口地址等
      api: {
        type: Object,
        require: true,
        default: () => {
          return {
            sellerId: '',
            // 获取商家的基本地址
            // baseURL/sellerId/product_list ==> 商家当前的分类
            // baseURL/sellerId/product_list/[classId/className]?page=1&size=10&sort=[name, data, price, sales] ==> 分页显示分类下的商品
            baseURL: ''
          }
        }
      }
    },
    data() {
      return {
        sellerName: '小店312',
        classList: [
          {
            label: '国伟站',
            cid: 'defregsaajwiuerghi',
            count: 88,
            type: ['jeans', 'flag', 'infomaction', 'it'],
            desc: '系统制作开发'
          },
          {
            label: '暂时不开发按时间销量等排序功能',
            cid: 'defregseaajwiuerghi',
            count: 201,
            type: ['jeans', 'flag', 'infomaction', 'it'],
            desc: '好吃点'
          },
          {
            label: '二手书市场',
            cid: 'defregseajwiuerghi',
            count: 10003,
            type: ['jeans', 'flag', 'infomaction', 'it'],
            desc: '卖书'
          }
        ]
      }
    },
    created() {
      // 这里加载商家等信息函数
      this.test()
    },
    methods: {
      checkOut(item) {
        this.$message.success(`你点击了分类：${item.label}, 它的ID是:${item.cid}`)
      },
      test() {
        console.log(this.api)
      }
    }
  }
</script>


<style lang="scss">
  @import "../assets/scss/color";

  .product-list {
    padding: 0 0 20px 0;
    .classify-panel {
      .el-card {
        position: relative;
        min-height: 70px;
        padding: 10px 10px 10px 6em;
        color: $basic-font;
        box-shadow: 0 0 0 $theme-color;
        .seller {
          position: absolute;
          left: 1em;
          top: 24px;
          font-weight: 600;
        }
        .class-btn {
          .el-button.el-button--text {
            margin-right: 22px;
            margin-bottom: 14px;
          }
        }
      }
    }
    /* 商品列表 */
    .product-panel {
      cursor: pointer;
      margin-top: 20px;
      padding: 6px 0;
      box-shadow: 0 0 0 $theme-color;
      .el-row {
        .el-col {
        }
      }
      .product-item {
        height: 120px;
        position: relative;
        overflow: hidden;
        width: 100%;
        margin-top: 10px;
        display: flex;
        justify-content: start;
        border: 1px solid $border;
        &:hover {
          border-color: $border-hover;
        }
        .image {
          width: 110px;
          height: 110px;
          margin-top: 5px;
          margin-left: 5px;
          overflow: hidden;
          flex: none;
        }
        .list-panel {
          flex: 2;
          height: 120px;
          padding: 8px;
          .product-title {
            color: $target-color;
            font-weight: 700;
            display: flex;
            justify-content: space-between;
            .price {
              color: $color-stress;
            }
          }
          p {
            color: $info-color;
            font-size: 12px;
            margin: 2px 0;
            clear: both;
          }
          .el-rate {
            float: left;
            margin: 6px;
            .el-rate__icon {
              font-size: 12px;
              margin-right: 2px;
              &:last-child {
                margin-right: 4px;
              }
            }
          }
          .product-count {
            height: 20px;
            line-height: 24px;
            font-size: 12px;
            color: $info-color;
            float: left;
          }
          .collect-btn {
            position: absolute;
            right: 18px;
            bottom: 6px;
            width: 60px;
          }
          .product-desc {
            padding-right: 80px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
          }
        }
      }
    }

    .pagenate {
      margin-top: 10px;
      text-align: center;
    }
  }
  @media screen and (max-width: 374px) {
    .product-desc {
      display: none !important;
    }
  }
</style>
